<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="ctn">
      <div class="boxl">
        <div class="box1">
          <div class="boxz1">校园风光</div>
          <div class="boxz2">xiao yuan feng guang</div>
        </div>
        <div class="box2"></div>
      </div>
      <div class="boxr">
        <div class="boxrs">
          <div class="box3"></div>
          <div class="box4">
            <div class="boxz3">学术研究</div>
            <div class="boxz4">xue shu yan jiu</div>
          </div>
          <div class="box5"></div>
        </div>
        <div class="boxrx">
          <div class="box6">
            <div class="boxz5">学生活动</div>
            <div class="boxz6">xue sheng huo dong</div>
          </div>
          <div class="box7"></div>
          <div class="box8"></div>
        </div>
      </div>
    </div>
  </body>
  <style>
    .ctn {
      width: 1200px;
      height: 417px;
      background-color: aqua;
      margin: auto;
    }
    .boxl {
      width: 289px;
      height: 417px;
      background: white;
      float: left;
    }
    .boxr {
      width: 911px;
      height: 417px;
      background: white;
      float: left;
    }
    .box1 {
      width: 289px;
      height: 188px;
      background: red;
      color: aliceblue;
      font-weight: 800;
      font-size: 35px;
      padding-top: 40px;
      padding-left: 40px;
      box-sizing: border-box;
    }
    .boxz1 {
    }
    .boxz2 {
      font-size: 15px;
      font-style: italic;
    }
    .box2 {
      width: 289px;
      height: 229px;
      background: white;
      float: left;
      background-image: url("https://www.pdsu.edu.cn/images/fgt12.jpg");
    }
    .boxrs {
      width: 911px;
      height: 248px;
      background: white;
      float: left;
    }
    .boxrx {
      width: 911px;
      height: 169px;
      background: white;
      float: left;
    }
    .box3 {
      width: 543px;
      height: 248px;
      background: white;
      float: left;
      background-image: url("https://www.pdsu.edu.cn/images/fgt11.jpg");
    }
    .box4 {
      width: 144px;
      height: 248px;
      background: goldenrod;
      float: left;
      color: aliceblue;
      font-weight: 800;
      font-size: 35px;
      padding-top: 40px;
      padding-left: 40px;
      box-sizing: border-box;
      writing-mode: vertical-rl;
    }
    .boxz3 {
    }
    .boxz4 {
      font-size: 15px;
      font-style: italic;
    }
    .box5 {
      width: 213px;
      height: 248px;
      background: white;
      float: left;
      background-image: url("//www.pdsu.edu.cn/images/1.JPG");
    }
    .box6 {
      width: 294px;
      height: 169px;
      background: teal;
      float: left;
      color: aliceblue;
      font-weight: 800;
      font-size: 35px;
      padding-top: 40px;
      padding-left: 40px;
      box-sizing: border-box;
    }
    .boxz5 {
    }
    .boxz6 {
      font-size: 15px;
      font-style: italic;
    }
    .box7 {
      width: 303px;
      height: 169px;
      background: yellowgreen;
      float: left;
      background-image: url("https://www.pdsu.edu.cn/images/fgt14.jpg");
    }
    .box8 {
      width: 303px;
      height: 169px;
      background: navajowhite;
      background-image: url("https://www.pdsu.edu.cn/images/fgt13.jpg");
      float: left;
    }
  </style>
</html>
